<template>
  <div>
    <van-list  v-model:loading="loading" :finished="finished" @load="onLoad">
      <div class="activityList" v-if="lists.length">
        <div v-for="(item, index) in lists" :key="index" class="card" @click="getActivityDetail(item.id)">
          <img :src="baseURL + item?.fileList[0].filePath" alt="">
          <p>{{ item.activityName }}</p>
        </div>
      </div>
      <van-empty :image="empty" image-size="200"  description="暂无数据" v-if="!lists.length && loading == false" />
    </van-list>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from 'vue-router'
import { baseURL } from '@/utils/request'
import empty from "@/assets/empty.png";
import { getAcitivityList } from "@/services/home";
const router = useRouter()
const lists = ref([]);
const total = ref();
const loading = ref(false);
const finished = ref(false);
const pageNum = ref(1);

const onLoad = () => {
  console.log('活动列表加载');
  getAcitivityList({
    orderByColumn: "recommend,createTime",
    isAsc: "desc,desc",
    pageNum: pageNum.value++,
  }).then(res => {
    if (res.code == 200) {
      console.log("res::", res);
      lists.value = lists.value.concat(res.rows)
      total.value = res.total
      // // 加载状态结束
      loading.value = false;
      // 数据全部加载完成
      if (lists.value.length >= total.value) {
        finished.value = true;
      }
    }
  })
};

const getActivityDetail = (id: number | string) => {
  router.push('/article/activityDetail?id=' + id)
};
</script>

<style lang="scss" scoped>
.activityList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  .van-list__placeholder {
    display: none;
  }

  .card {
    background-color: #fff;
    margin-bottom: 10px;
    display: inline-block;
    width: 168px;
    height: 225px;
    border-radius: 8px;
    overflow: hidden;

    img {
      width: 168px;
      height: 168px;
    }

    p {
      font-size: 14px;
      padding-left: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}
</style>